<template>
  <el-container>
    <el-header class="header" height="120px">
      <div class="logo">
        <img src="../assets/images/logo-title.png" alt="logo">
      </div>
      <div class="nav">
        <el-menu class="menu" router mode="horizontal">
          <template v-for="item in menu">
            <el-menu-item v-if="!item.subs" :key="item.index" :index="item.index">{{ item.label }}</el-menu-item>
            <el-submenu v-else :key="item.index" :index="item.index">
              <template #title>{{ item.label }}</template>
              <el-menu-item v-for="subItem in item.subs" :key="subItem.index" :index="subItem.index">
                {{ subItem.label }}
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </div>
      <div class="user"></div>
    </el-header>
    <el-container>
      <el-container class="page">
        <router-view></router-view>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  data: () => ({
    menu: [
      {
        label: '猫猫市场',
        index: '/shop'
      },
      {
        label: '养猫指南',
        index: '/guide',
        subs: [
          {
            label: '猫猫信息',
            index: '/catinfo'
          },
          {
            label: '饲养指南',
            index: '/catinfo/feed'
          }
        ]
      },
      {
        label: '用品商城',
        index: '/goods'
      },
      {
        label: '猫猫护理',
        index: '/cater',
        subs: [
          {
            label: '生育预约',
            index: '/cater/beauty'
          },
          {
            label: '问诊预约',
            index: '/cater/diagnose'
          }
        ]
      },
      {
        label: '帮助中心',
        index: '/feedback'
      }
    ]
  }),
  mounted() {

  }
}
</script>

<style lang="less" scoped>
@import "../assets/less/common";

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  padding-left: 32px;

  img {
    height: 100px;
  }
}

.el-menu-item.is-active {
  border-bottom-color: @theme-color !important;
}

.menu {
  border-bottom-color: #F9C3C5 !important;
}

.page {
  width: 100%;
  height: 100%;
}
</style>
